/*===========================================
      bootstrap.css reset
  ===========================================
*/

body {
  background-color: #fff;
  color: #666;
}

* {
  padding: 0;
  margin: 0;
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

i {
  font-style: normal;
}

b {
  font-weight: normal;
}

button, select, textarea {
  outline: none !important
}

.form-control {
  box-shadow: 0 0 4px rgba(214, 214, 214, .75) inset;
}

a {
  text-decoration: none !important;
  cursor: pointer;
}

.js-access-control {
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: none !important;
}

/*===========================================
          base.css
  ===========================================
*/

.dy-flex {
  display: flex;
}

.css-width-100 {
  width: 80px;
}

.css-width-100 {
  width: 100px;
}

.css-width-120 {
  width: 120px;
}

.line-height-34 {
  line-height: 34px;
}

.line-height-56 {
  line-height: 55px;
}

.mt-0 {
  margin-top: 0;
}

.cancel-default {
  background: none;
  border: 0;
  box-shadow: none;
}

.cancel-default:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.white-space {
  white-space: nowrap;
}

/*字体*/

.font-12 {
  font-size: 12px;
}

.font-14 {
  font-size: 14px;
}

.font-16 {
  font-size: 16px;
}

.font-18 {
  font-size: 18px;
}

.color-333 {
  color: #333;
}

.color-666 {
  color: #666;
}

.color-999 {
  color: #999;
}

.color-white {
  color: #fff;
}

.color-black {
  color: #000;
}

.color-primary {
  color: #5e67a5;
}

.color-gray {
  color: #a5aab7;
}

.color-orange {
  color: #ea723d;
}

.color-ec4151 {
  color: #ec4151;
}

.color-blue {
  color: #476798;
}

.alert-mes {
  color: #ec4151;
}

.font-wt {
  font-weight: bolder;
}

.font-nm {
  font-weight: normal;
}

/*边框*/

.border {
  border: 1px solid #e5e5e5;
}

.border-t {
  border-top: 1px solid #e5e5e5;
}

.border-b {
  border-bottom: 1px solid #e5e5e5;
}

.border-l {
  border-left: 1px solid #e5e5e5;
}

.border-r {
  border-right: 1px solid #e5e5e5;
}

/*flex布局*/

.dy-flex {
  display: flex !important;
}

.dy-fx-1 {
  flex: 1 !important;
}

.dy-fx-2 {
  flex: 2 !important;
}

.dy-fx-3 {
  flex: 3 !important;
}

.dy-fx-4 {
  flex: 4 !important;
}

.dy-fx-5 {
  flex: 5 !important;
}

.dy-fx-6 {
  flex: 6 !important;
}

.dy-fx-7 {
  flex: 7 !important;
}

.dy-fx-8 {
  flex: 8 !important;
}

.dy-fx-9 {
  flex: 9 !important;
}

.dy-fx-10 {
  flex: 10 !important;
}

.dy-fx-11 {
  flex: 11 !important;
}

.dy-fx-12 {
  flex: 12 !important;
}

.dy-fx-13 {
  flex: 13 !important;
}

.dy-center {
  justify-content: center;
  align-items: center;
}

.dy-row-center {
  align-items: center;
}

.dy-column-center {
  justify-content: center;
}

/*阴影*/

.box-o-shadow {
  box-shadow: 0 0 18px rgba(80, 80, 80, 0.75);
}

.box-i-shadow {
  box-shadow: 0 0 8px rgba(214, 214, 214, 0.75) inset;
}

.box-i-shadow-2 {
  box-shadow: 0 0 8px rgba(214, 214, 214, 0.75) inset;
  border: 1px solid #e5e5e5;
}

.box-i-shadow-1 {
  box-shadow: 0 0 8px rgba(0, 0, 0, .25) inset;
}

/*背景*/

.bg-fff {
  background-color: #fff !important;
}

.bg-f7f7f7 {
  background-color: #f7f7f7;
}

.bg-fcfcfc {
  background-color: #fcfcfc;
}

.bg-fafbfc {
  background-color: #fafbfc;
}

/*边距*/

.pd-0 {
  padding: 0;
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}

.plr-0 {
  padding-left: 0;
  padding-right: 0;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.pl-12 {
  padding-left: 12px;
}

.pr-12 {
  padding-right: 12px;
}

.pr-15 {
  padding-right: 15px;
}

.pl-24 {
  padding-left: 24px;
}

.pr-24 {
  padding-right: 24px;
}

.plr-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.plr-12 {
  padding-right: 12px;
  padding-left: 12px;
}

.plr-24 {
  padding-right: 24px;
  padding-left: 24px;
}

.ptb-75 {
  padding-top: 75px !important;
  padding-bottom: 75px;
}

.ptb-10 {
  padding-bottom: 10px;
  padding-top: 10px;
}

.ptb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pb-6 {
  padding-bottom: 6px;
}

.pt-10 {
  padding-top: 10px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pt-15 {
  padding-top: 15px;
}

.mt-5 {
  margin-top: 5px;
}

.ml-5 {
  margin-left: 5px;
}

.mlr-3 {
  margin: 0 3px;
}

.mtb-10 {
  margin-bottom: 10px;
  margin-top: 10px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mr-10 {
  margin-right: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.mlr-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.ml-16 {
  margin-left: 16px;
}

.mr-16 {
  margin-right: 16px;
}

.ml-24 {
  margin-left: 24px;
}

.mr-24 {
  margin-right: 24px;
}

.mlr-24 {
  margin: 0 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-6 {
  margin-bottom: 6px;
}

.mt-6 {
  margin-top: 6px;
}

.mr-6 {
  margin-right: 6px;
}

.vb {
  vertical-align: bottom;
}

/*指示*/

.cursor {
  cursor: pointer;
}

/*圆角*/

.br-0 {
  border-radius: 0;
}

.br-2 {
  border-radius: 2px;
}

.br-4 {
  border-radius: 4px;
}

.br-6 {
  border-radius: 6px;
}

.br-8 {
  border-radius: 8px;
}

/*布局*/

.layout {
  padding: 0 24px 10px;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.inline {
  display: inline-block;
}

.z-50 {
  z-index: 50;
}

.z-998 {
  z-index: 998;
}

.z-999 {
  z-index: 999;
}

/*表格*/

.hl-table {
  border: 1px solid #e5e5e5;
  border-bottom: none;
}

.hl-table .tb-title {
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #a5aab7;
  border-bottom: 1px solid #e5e5e5;
}

.hl-table .tb-content .content-item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}

.hl-table .tb-content .content-item div {
  border-right: 1px solid #e5e5e5;
}

.hl-table .tb-content .content-item div:last-child {
  border-right: none;
}

/*单选按钮*/

.hl-radio {
  position: relative;
  padding-left: 18px;
  margin-right: 10px;
  cursor: pointer;
}

.hl-radio::before {
  content: '';
  width: 13px;
  height: 13px;
  border: 1px solid #666;
  position: absolute;
  left: -1px;
  top: 1px;
  border-radius: 50%;
}

.hl-radio.active::before {
  border-color: #5e67a5;
  background-color: #5e67a5;
}

.hl-checkbox {
  cursor: pointer;
  padding-left: 0;
  position: relative;
  margin-left: 16px;
  margin-right: 10px;
  line-height: 30px;
}

.hl-checkbox::before {
  content: '';
  width: 13px;
  height: 13px;
  position: absolute;
  left: -10px;
  top: 0px;
  border: 1px solid #666;
  border-radius: 4px;
}

.hl-checkbox.active::before {
  content: '';
  background-image: url('../../../assets/images/Check.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px;
  background-color: #5e67a5;
  border: 1px solid #5e67a5;
  border-radius: 4px;
  position: absolute;
  left: -10px;
  top: 0px;
}

/*弹层*/

.backdrop {
  position: fixed;
  z-index: 998;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(16, 16, 28, 0.4);
}

/*单行省略*/

.ellipsis-1 {
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

/*单行截断*/

.cutoff {
  overflow: hidden;
  white-space: nowrap;
}

/*水平垂直居中*/

.row-column-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

/*===========================================
           common.css
  ===========================================
*/

.btn a {
  color: #5e67a5;
}

.n-btn-primary {
  min-width: 110px;
  height: 34px;
  line-height: 22px;
  text-align: center;
  background-color: #5e67a5;
  color: #fff;
  border: 0;
}

.n-btn-outline {
  min-width: 90px;
  height: 34px;
  line-height: 22px;
  background-color: #fff;
  color: #5e67a5;
  border: 1px solid #5e67a5;
}

.n-btn-default {
  min-width: 110px;
  height: 34px;
  line-height: 22px;
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fbfbfb', endcolorstr='#f2f2f2', gradientType=1);
  -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fbfbfb', endcolorstr='#f2f2f2', gradientType=1);
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
  color: #666;
  border: 1px solid #e5e5e5;
}

.s-btn-primary {
  min-width: 80px;
  height: 34px;
  line-height: 22px;
  text-align: center;
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fbfbfb', endcolorstr='#f2f2f2', gradientType=1);
  -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fbfbfb', endcolorstr='#f2f2f2', gradientType=1);
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
  color: #fff;
  border: 0;
}

.s-btn-primary-1 {
  min-width: 80px;
  height: 34px;
  line-height: 22px;
  text-align: center;
  background-color: #5e67a5;
  color: #fff;
  border: 0;
}

.s-btn-outline {
  min-width: 90px;
  height: 34px;
  line-height: 22px;
  background-color: #fff;
  color: #5e67a5;
  border: 1px solid #5e67a5;
}

.s-btn-default {
  min-width: 80px;
  height: 34px;
  line-height: 22px;
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fbfbfb', endcolorstr='#f2f2f2', gradientType=1);
  -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fbfbfb', endcolorstr='#f2f2f2', gradientType=1);
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
  color: #666;
  border: 1px solid #e5e5e5;
}

/*弹出层*/

.pop {
  width: 800px;
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
}

.pop .head-pop {
  width: 100%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-color: #fff;
}

.pop .head-pop .fw-close {
  top: 0;
  right: 15px;
  width: 50px;
  height: 50px;
  border: 0;
  background: none;
  font-size: 32px;
}

.pop .content-pop {
  background: #f9f9f9;
  min-height: 200px;
  max-height: 500px;
  overflow-y: scroll;
}

.pop .content-pop::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.pop .footer-pop {
  background-color: #fff;
  padding: 10px 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/*分割线*/

.sperate-line {
  border-bottom: 1px solid #f2f2f2;
  margin: 15px 0;
}

/* 必填项*样式 */

.required {
  color: #ec4151;
}

.no-required {
  padding-left: 5px;
}

/*===========================================
          日历控件
  ===========================================
*/

.dt-active {
  background-color: rgba(0, 0, 0, 0.5);
}

.dt-dateControl {
  margin: 0;
  padding: 0;
  width: 290px;
  padding: 6px 6px;
  position: absolute;
  z-index: 9999999;
  left: 0;
  top: 100%;
  display: none;
  box-shadow: 0 0 8px rgba(165, 165, 165, 1);
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
}

.dt-setDate {
  height: 46px;
  background: #fff;
  /*overflow: hidden;*/
  position: relative;
  box-sizing: border-box;
}

.dt-nowMonth {
  display: none;
}

.dt-setYearMonth {
  /*float: left;*/
  /*margin-left: 15px;*/
}

.select-date-ui {
  height: 46px;
  position: relative;
  display: inline-block;
  z-index: 99;
  vertical-align: top;
  box-sizing: border-box;
}

.select-date-ui span {
  height: 46px;
  line-height: 46px;
  font-size: 14px;
  text-align: center;
  display: block;
  color: #000;
}

.select-date-ui span:before {
  content: '';
  position: absolute;
  right: 2px;
  top: 24px;
  border: 4px solid transparent;
  border-top-color: #ccc;
}

.select-date-ui span::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 14px;
  border: 4px solid transparent;
  border-bottom-color: #ccc;
}

.select-date-ui ul {
  position: absolute;
  left: 0;
  top: 40px;
  list-style: none;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 0 8px #d3dce2;
  width: 100%;
  display: none;
  max-height: 262px;
  overflow: hidden;
  border-radius: 4px;
  overflow-y: scroll;
  background-color: #fff;
}

.select-date-ui ul li {
  line-height: 20px;
  font-size: 13px;
  height: 20px;
  /*padding: 8px 0;*/
  margin: 3px 0;
  text-indent: 0.4em;
  color: #333;
}

.select-date-ui ul li:hover {
  background-color: #78ddaa;
  color: #fff;
}

.dt-Calendar {
  width: 100%;
  position: relative;
}

.dt-weekHead {
  width: 100%;
  text-align: center;
  font-size: 0;
  background: #fff;
}

.dt-weekHead>div {
  font-size: 14px;
  display: inline-block;
  color: #999;
}

.curBg {
  background: #78ddaa;
  box-shadow: 0 0 4px #d3dce2;
  border-radius: 4px;
  color: #fff;
}

.dt-numDay {
  font-size: 0;
  background: #fff;
}

.dt-numDay>div {
  font-size: 14px;
  height: 60px;
  text-align: center;
  margin: 1px 0;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
}

.dt-mWarp {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 5px 0;
  background: rgba(255, 255, 255, .9);
  text-align: center;
  font-size: 0;
  display: none;
  z-index: 10;
}

.dt-mWarp .om {
  width: 100px;
  height: 50px;
  margin: 5px;
  font-size: 16px;
  line-height: 50px;
  color: #fff;
  display: inline-block;
  background: rgba(0, 0, 0, .7);
  cursor: pointer;
}

.icon-Gm-calendar:before {
  position: absolute;
  z-index: 9;
  right: 8px;
  top: 7px;
  font-size: 18px;
  color: #999;
}

.inline-date {
  display: inline-block;
  font-size: 20px;
  position: relative;
  margin-top: 13px;
  z-index: 99;
  vertical-align: top;
}

.inline:before {
  color: #cccccc !important;
}

.day-item:hover {
  background: #78ddaa;
  box-shadow: 0 0 4px #d3dce2;
  border-radius: 4px;
  color: #fff;
}

.year {
  display: block;
  float: left;
  margin-left: 10px;
}

.month {
  display: block;
  margin-right: 10px;
  float: right;
}

.year .select-date-ui {
  width: 98px;
}

.month .select-date-ui {
  width: 60px;
}

/*===========================================
          分页控件
  ===========================================
*/

/**page* */

.page {
  list-style: none;
}

.page>li {
  float: left;
  padding: 5px 10px;
  cursor: pointer;
}

.page .pageItem {
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fcfcfc', endcolorstr='#ececec', gradientType=1);
  -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fcfcfc', endcolorstr='#ececec', gradientType=1);
  background: linear-gradient(to bottom, #fcfcfc, #ececec);
  border: solid 1px #e5e5e5;
  border-radius: 3px;
  margin: 5px 0px 5px 10px;
  text-align: center;
}

.page .pageItemActive {
  border: solid 1px #5e67a5;
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='#44b549', endcolorstr='#44b549', gradientType=1);
  -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#44b549', endcolorstr='#44b549', gradientType=1);
  background: #5e67a5;
  color: white;
}

.page .pageItemActive {
  border: solid 1px #5e67a5;
  margin: 5px 0px 5px 10px;
  background-color: #5e67a5;
  color: #fff !important;
  border-radius: 3px;
}

.page .pageItem:hover {
  border: solid 1px #5e67a5;
  color: #5e67a5;
}

.page .pageItemDisable {
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fcfcfc', endcolorstr='#ececec', gradientType=1);
  -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#fcfcfc', endcolorstr='#ececec', gradientType=1);
  background: linear-gradient(to bottom, #fcfcfc, #ececec);
  margin: 5px 0px 5px 10px;
  background-color: #f8f8f8;
  border-radius: 3px;
  border: 1px solid #e5e5e5;
}

.pagenums {
  width: 80px !important;
}

.user-page-num i {
  font-weight: 600;
  font-style: normal;
  color: #5e67a5;
}

/* page2 */

.turn-page ul li {
  float: left;
  height: 21px;
  font-size: 12px;
  background: linear-gradient(to bottom, #fcfcfc, #ececec);
  margin: 5px 0 5px 10px;
  background-color: #f8f8f8;
  border-radius: 3px;
  border: 1px solid #e5e5e5;
  line-height: 21px;
  margin: 0 2px;
  text-align: center;
  cursor: pointer;
}

.turn-page ul li.pages-fn {
  background: none !important;
  border: 0 !important;
  font-size: 21px;
  color: #999;
}

.turn-page ul li.page {
  width: 21px;
}

.turn-page ul li:hover {
  border: solid 1px #5e67a5;
  color: #5e67a5;
}

.turn-page ul li.active {
  border: solid 1px #5e67a5;
  background: #5e67a5;
  color: #fff !important;
  border-radius: 3px;
}

/*===========================================
           layer
  ===========================================
*/

.hl-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000;
  max-width: 400px;
  padding: 10px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
}

.hllayer-mask {
  position: fixed;
  z-index: 998;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(16, 16, 28, 0.4);
}

.hllayer-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  max-width: 400px;
  padding: 10px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
}

.hllayer-page {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: 400px;
  border-radius: 4px;
}

.hllayer-page .title {
  position: relative;
  height: 40px;
  text-align: center;
  background-color: #fff;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
}

.hllayer-page .close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 24px;
  color: #767676;
  opacity: 1;
  cursor: pointer;
}

.hllayer-confirm .mes {
  height: 106px;
  /* line-height: 106px; */
  padding: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #666;
  font-size: 14px;
  background-color: #fff;
}

.hllayer-confirm .btn-wrapper {
  overflow: hidden;
}

.hllayer-confirm .no, .hllayer-confirm .yes {
  float: left;
  width: 50%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.hllayer-confirm .no {
  border-bottom-right-radius: 4px;
  border-left: 1px solid #f2f2f2;
  background-color: #f8f8f8;
  color: #666;
}

.hllayer-confirm .yes {
  border-bottom-left-radius: 4px;
  color: #fff;
  background-color: #5e67a5;
}

.hllayer-tips {
  display: block;
  position: absolute;
  z-index: 999;
  line-height: 34px;
  background: #fff;
  padding: 0 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  border-radius: 4px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .2))
}

.hllayer-tips:before {
  content: '';
  border: 10px solid transparent;
  border-bottom-color: #fff;
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translate(-50%, 0);
}

.hllayer-tip-mes {
  text-align: center;
  border-bottom: 1px dashed #c9c9c9;
}

.hllayer-tip-mes:last-child {
  border-bottom: none;
}

.hllayer-loading {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -25px;
  border-color: #fff;
  border-radius: 4px;
  box-shadow: 5px 5px 55px 5px #ccc;
  padding: 10px;
  width: 50px;
  height: 50px;
  text-align: center;
  background: url("../../../assets/images/loading.gif") no-repeat #fff;
  background-position: center center;
}

.user-page-num .pagenums {
  vertical-align: middle;
}

/*
==================================
  下拉模拟
==================================
*/

.select-ul {
  width: 100%;
  height: 34px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
}

.select-ul span {
  height: 34px;
  line-height: 34px;
  text-indent: 1em;
  display: block;
  color: #666666;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
}

.select-ul span.info {
  background-color: #f9f9f9;
  border: none;
}

.select-ul span.focus {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.select-ul .select-name:before {
  content: '';
  position: absolute;
  right: 6px;
  top: 15px;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid dashed dashed dashed;
  border-color: #DBDBDB transparent transparent transparent;
}

.select-ul ul {
  position: absolute;
  left: 0;
  top: 32px;
  list-style: none;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top: 0;
  width: 100%;
  display: none;
  max-height: 280px;
  overflow: hidden;
  overflow-y: scroll;
  background-color: #fff;
  z-index: 999;
}

.select-ul ul li {
  position: relative;
  line-height: 28px;
  height: 28px;
  text-indent: 0.8em;
  color: #333;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

.select-ul ul li:hover {
  background-color: #5e67a5;
  color: #fff;
}

.select-qm-show {
  display: block;
  position: absolute;
  z-index: 2000;
  height: 28px;
  padding: 0 6px;
  line-height: 28px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(214, 214, 214, 0.75) inset;
  color: #666;
}

.select-ul .box-i-shadow {
  box-shadow: 0 0 4px rgba(214, 214, 214, 0.75) inset;
}

/*
==================================
  图片展示
==================================
*/

.is-mask {
  position: fixed;
  z-index: 998;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(16, 16, 28, .4);
}

.is-image-show-container {
  position: fixed;
  left: 50%;
  top: 10%;
  margin-top: 0px;
  transform: translate(-50%, 0);
  z-index: 1000;
}

.is-big-image-container {
  width: 600px;
  height: 600px;
  position: relative;
  text-align: center;
  font-size: 0;
  margin: 0 auto 10px;
}

.is-big-image-wrapper {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

.is-big-image-scroll-wrapper {
  position: relative;
}

.is-big-image-wrapper img {
  vertical-align: middle;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.is-close-icon {
  cursor: pointer;
  display: block;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: rgba(16, 16, 28, .4);
}

.is-close-icon:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  ;
}

.operation-button-container {
  width: 300px;
  height: 60px;
  margin: 0 auto;
  position: relative;
}

.is-icon-wrapper {
  cursor: pointer;
  width: 30px;
  height: 63px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.is-icon-wrapper.left {
  left: 10px;
}

.is-icon-wrapper.right {
  right: 10px;
}

.is-icon {
  cursor: pointer;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: rgba(16, 16, 28, .4);
}

.is-icon:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
}

.is-operation-icon-wrapper {
  cursor: pointer;
  display: block;
  position: absolute;
  left: 0;
  transform: translate(-50%, 0);
  width: 70px;
  height: 26px;
  border-radius: 36px;
  padding: 4px 10px;
  background-color: rgba(16, 16, 28, .4);
  color: #fff;
  text-align: center;
}

.is-operation-icon-wrapper.is-increase-icon-wrapper {
  left: 0;
}

.is-operation-icon-wrapper.is-reduce-icon-wrapper {
  left: 33%;
}

.is-operation-icon-wrapper.is-reset-icon-wrapper {
  left: 66%;
}

.is-operation-icon-wrapper.is-download-icon-wrapper {
  left: 100%;
}

/* //** */

.append-temp li:hover {
  background-color: #838eba;
  color: #fff;
}

/* /hover */

*[data-Hover] {
  position: relative;
}

*[data-Hover]:hover::before {
  content: attr(data-Hover);
  width: auto;
  white-space: nowrap;
  background-color: #fff;
  position: absolute;
  padding-right: 10px;
  left: 0;
  top: 0;
  z-index: 9;
}

/*
==================================
   列表title
==================================
*/

.hl-list-title {
  padding: 11px 0;
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: 1px solid #e5e5e5;
}

.hl-list-title h4 {
  font-size: 16px;
  font-weight: bolder;
  color: #666;
  float: left;
  line-height: 34px;
}

.hl-list-title button {
  float: right;
}

/*
==================================
   列表分隔 tabbar
==================================
*/

.hl-list-separated-tabbar {
  padding: 10px 0;
  overflow: hidden;
}

.hl-list-separated-tabbar li {
  cursor: pointer;
  float: left;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  margin-right: 20px;
  padding: 0 10px;
}

.hl-list-separated-tabbar li.active {
  background-color: #565E99;
  color: #fff;
}

/*
==================================
   滑动式列表
==================================
*/

.config-table-container {
  position: relative;
  margin: 10px 24px;
  border-radius: 4px;
}

.config-table-wrap {
  margin-right: 124px;
  overflow: hidden;
}

.config-table-operate-wrap {
  width: 124px;
  position: absolute;
  right: 0;
  top: 0;
  border-bottom: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: 1px solid #e5e5e5;
}

.config-table-operate-wrap .title {
  padding: 8px 0;
  height: 40px;
  border-bottom: 1px solid #e5e5e5;
}

.config-table-operate-wrap .title div {
  margin-right: 30px;
  border-right: 1px solid #e5e5e5;
  text-align: center;
  color: #a5aab7;
  height: 23px;
  line-height: 23px;
}

.config-table-operate-wrap .title div.no-border {
  border-right: none;
  margin-right: 0;
}

.config-table-operate-wrap .title {
  position: relative;
  padding: 8px 0;
  border-bottom: 1px solid #e5e5e5;
}

.config-table-operate-wrap .title .extension-wrap {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 8px;
  width: 30px;
  height: 23px;
  margin-right: 0;
}

.config-table-operate-wrap .title:hover .table-type-wrap {
  display: block;
}

.config-table-operate-wrap .title .table-type-wrap {
  width: 102px;
  display: none;
  position: absolute;
  left: -10px;
  top: -20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(214, 214, 214, .75);
}

.config-table-operate-wrap .table-type-wrap:before {
  display: block;
  content: '';
  border-width: 8px 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  left: 102px;
  top: 40%;
}

.config-table-operate-wrap .title .table-type-wrap li {
  padding: 0 6px;
  height: 24px;
  line-height: 24px;
  color: #5e67a5;
  cursor: pointer;
}

.config-table-operate-wrap .title .table-type-wrap li.active {
  background-color: #f2f2f2;
}

.config-table-operate-wrap .title .table-type-wrap li .icon {
  padding-left: 6px;
}

.config-table-operate-wrap .title .table-type-wrap li:hover {
  background-color: #f2f2f2;
}

.config-table-operate-wrap .button-group li {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}

.config-table-operate-wrap .button-group li:last-child {
  border-bottom: none;
}

.config-table-operate-wrap .button-group li a {
  margin: 0 5px;
}

.config-table-title-wrap {
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #a5aab7;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
}

.config-table-title-item {
  position: relative;
  float: left;
  padding: 0 4px;
}

.config-table-title-item .icon-Gm-sort-ascending, .config-table-title-item .icon-Gm-sort-descending {}

.config-table-content-wrap ul {
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
  overflow: hidden;
}

.config-table-content-wrap ul:hover {
  background-color: #f9f9f9;
}

.config-table-content-wrap ul:last-child {
  border-bottom: none;
}

.config-table-content-wrap ul li {
  float: left;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
}

/*
==================================
   详情页tabbar
==================================
*/

.details-tabbar {
  background-color: #f7f7f7;
  overflow: hidden;
  border-bottom: 1px solid #e5e5e5;
}

.details-tabbar .tab-wrap {
  float: left;
}

.details-tabbar .tab-wrap button {
  height: 56px;
  line-height: 56px;
  padding: 0 15px;
  border: 0;
  background: 0 0;
  border-radius: 0;
}

.details-tabbar .tab-wrap button.active {
  color: #5e67a5;
  border-bottom: 3px solid #5e67a5;
}

.details-tabbar .title {
  float: right;
  line-height: 56px;
  padding-right: 24px;
}

/*
==================================
   块级容器
==================================
*/

.block-container {
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
}

.block-container .title-wrap {
  padding: 13px 0;
  overflow: hidden;
}

.block-container .title-wrap .title {
  color: #a5aab7;
  font-weight: bolder;
  font-size: 14px;
  line-height: 34px;
  margin: 0;
}

.base-panel-outshadow {
  padding: 10px;
  box-shadow: 0 0 8px rgba(214, 214, 214, 0.50);
  background-color: #fff;
}

/*
==================================
   信息展示块
==================================
*/

.mes-show-container ul {
  display: flex;
}

.mes-show-container ul>li {
  display: flex;
  flex: 1;
}

.mes-show-container ul>li .title {
  color: #999;
  padding: 6px 0;
  line-height: 22px;
  font-size: 14px;
  flex: 1;
}

.mes-show-container ul>li .value {
  color: #666;
  padding: 6px 2px 6px 0;
  line-height: 22px;
  font-size: 14px;
  flex: 1;
}

.dashed-seperate-line {
  height: 1px;
  border-bottom: 1px dashed #e5e5e5;
  margin: 10px 0;
}
